<template>
	<view class="passenger-flow">

		<view class="page">
			<!-- <image
				src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps5t52mlf7ejdi37iz8jcgihst8792aq9qec7bd80be-3344-44bf-bc74-929506115c39"
				class="image_1"></image> -->
			<view class="group_1">
				<!-- <image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/pswot4ay37x8otyp4znx4qp7rvo99o7tj1qf429d815-a26b-4b92-9f9e-6c9cbbbc2794"
					class="image_2"></image> -->
				<view class="group_2">
					<view class="nav-bar_1">
						<nav-bar :title="das" :color="navBarColor" :bg="navBarBg" />
						<!-- <view class="group_3">
		          <view class="section_1">
		            <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfs4dc7r2q29cj97g39xketsrd57ap9eose37f8fb0-c66c-44d6-a1c1-e86f152edcfc" class="icon_1"></image>
		            <text lines="1" class="text_1">排行榜</text>
		          </view>
		        </view>
		        <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps5f05do22c5v720n0wrk8uqehijxxc02cb2d7ccff-59fa-4ead-af47-359d9fcc2a99" class="applet-top-bar_1"></image> -->
					</view>
					<view class="group_4"></view>
				</view>
				<view class="box_1">
					<text lines="1" class="text_3">销售任务排行</text>
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszlkcfen2y7mbyxn1p4ydjs123myc7mqc9b604b40fe-9cae-4aea-9bb3-1bf7013709f5"
						class="icon_2"></image>
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/psyi1nl5gftbtbufl52df4b9wl7ecfqbrb27e503a-2ad8-41f5-b07c-95af20ebfbc8"
						class="icon_3"></image>
					<!-- <text lines="1" decode="true" class="text_4">2020年&nbsp;06月</text> -->
					<view class="flex-center total-1">
						<view class="flex-align" >
							<van-icon name="arrow-left" size="32rpx" @click="changeTime(0)"/>
							<view class="calendar" @click="showTime = true">
								{{date.getFullYear()}}.
								{{(date.getMonth() + 1).toString().padStart(2,'0')}}
							</view>
							<van-icon name="arrow" size="32rpx" @click="changeTime(1)"/>
						</view>
					</view>
					<image
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/psn6zucs9tuf9d6zvxyfy1oj467u8tx80uk2086fda8-8808-44a5-a939-d5de3274af74"
						class="icon_4"></image>
				</view>
				<view class="group_5">
					<!-- <view class="text-wrapper_1">
						<text lines="1" class="text_2">销售排行榜</text>
					</view> -->
					<view class="group_6">
						<view class="box_8">
							<!-- <text lines="1" class="text_44">888p</text> -->
							<view class="group_7">
								<view class="image-text_1">
									<image
										src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
										class="single-avatar_1"></image>
									<view class="text-group_1">
										<text lines="1" class="text_45">奉孝</text>
										<text lines="1" class="text_46">¥688</text>
									</view>
								</view>
								<view class="box_9">
									<view class="image-text_2">
										<image
											src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
											class="single-avatar_2"></image>
										<text lines="1" class="text-group_2">文若</text>
									</view>
									<text lines="1" class="text_47">¥688</text>
									<text lines="1" class="text_48">任务:¥500</text>
								</view>
								<view class="image-text_3">
									<image
										src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
										class="single-avatar_3"></image>
									<view class="text-group_3">
										<text lines="1" class="text_49">太白</text>
										<text lines="1" class="text_50">¥688</text>
									</view>
								</view>
							</view>
						</view>
						<view class="text-wrapper_2">
							<text lines="1" class="text_5">任务:¥500</text>
							<text lines="1" class="text_6">超指标:￥50</text>
							<text lines="1" class="text_7">超指标:￥50</text>
							<text lines="1" class="text_8">任务:¥500</text>
							<text lines="1" class="text_9">超指标:￥50</text>
						</view>
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps8l3epmx1e37t9afdqkfq9zkthzv9p3dfe6b6be6c-8562-4623-a7ba-97ed696972a5"
							class="image_3"></image>
						<view class="text-wrapper_3">
							<text lines="1" class="text_10">姓名</text>
							<text lines="1" class="text_11">任务</text>
							<text lines="1" class="text_12">业绩</text>
							<text lines="1" class="text_13">超指标</text>
						</view>
						<image
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps0532o0hg66pada0eftibmbvyzbiawqsfn00e2d3b9-68b8-48d8-a4f8-eea642e9389c"
							class="image_4"></image>
						<view class="box_2" v-for="(item,index) in 10" :key="index">
							<text lines="1" class="text_14">4</text>
							<image
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
								class="image_5"></image>
							<text lines="1" class="text_15">文若</text>
							<text lines="1" class="text_16">¥500</text>
							<text lines="1" class="text_17">¥500</text>
							<text lines="1" class="text_18">￥80</text>
						</view>
						
						
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	import {formatDate} from "@/utils/util.js"
	export default {
		mixins: [navbar({
			navBarColor: '#000000'
		})],
		data() {
			return {
				navBarHeight: 0,
				das: '',
				showTime:false,
				date:new Date(),
				nowDate:formatDate(new Date(),'hh:mm'),
			}
		},
		created() {
			const {
				navBarHeight
			} = getApp().globalData;
			this.navBarHeight = navBarHeight;

		},
		onLoad() {
			this.das = '排行榜'
		},
		methods: {
			changeTime(state){
				if(state === 0){
					let year = this.date.getFullYear()
					let mouth = this.date.getMonth()
					let time = new Date(year,mouth -1)
					this.date = time
				}else{
					let year = this.date.getFullYear()
					let mouth = this.date.getMonth()
					let time = new Date(year,mouth +1)
					this.date = time
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.passenger-flow {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: rgb(255, 255, 255);
		padding: 0rpx 0 50rpx 0;
		position: relative;

		.page {
			position: relative;
			width: 750rpx;
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		.image_1 {
			width: 750rpx;
			height: 1333rpx;
		}

		.group_1 {
			// position: absolute;
			// left: 0rpx;
			// top: 0rpx;
			// width: 750rpx;
			// height: 300rpx;
			// background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/89f0e085d494399af692594640d6d8409b80176e.png') 100% no-repeat;
			// background-size: 100% 100%;
			display: flex;
			flex-direction: column;
		}

		.image_2 {
			width: 654rpx;
			height: 22rpx;
			margin: 33rpx 0 0 48rpx;
		}

		.group_2 {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 750rpx;
			height: 300rpx;
			background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/89f0e085d494399af692594640d6d8409b80176e.png') 100% no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-center;
		}

		.nav-bar_1 {
			width: 750rpx;
			height: 90rpx;
			margin-top: 29rpx;
			flex-direction: row;
			display: flex;
		}

		.group_3 {
			height: 37rpx;
			display: flex;
			flex-direction: column;
			width: 147rpx;
			margin: 28rpx 0 0 47rpx;
		}

		.section_1 {
			width: 147rpx;
			height: 37rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.icon_1 {
			width: 20rpx;
			height: 37rpx;
		}

		.text_1 {
			width: 108rpx;
			height: 35rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			font-family: PingFang-SC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 36rpx;
			margin-top: 1rpx;
		}

		.applet-top-bar_1 {
			width: 150rpx;
			height: 55rpx;
			margin: 25rpx 6rpx 0 400rpx;
		}

		.group_4 {
			width: 750rpx;
			height: 57rpx;
			margin-bottom: 29rpx;
			display: flex;
			flex-direction: column;
		}

		.group_5 {
			height: 5rpx;
			// background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6261372b45253d574328766cb2e152171a223148.png') 100% no-repeat;
			// background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			width: 750rpx;
			position: relative;
		}

		.text-wrapper_1 {
			background-color: rgba(255, 214, 71, 1.000000);
			height: 51rpx;
			display: flex;
			flex-direction: column;
			width: 347rpx;
			margin: 12rpx 0 0 214rpx;
		}

		.text_2 {
			width: 198rpx;
			height: 38rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 40rpx;
			font-family: JPangWa;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 7rpx 0 0 74rpx;
		}

		.group_6 {
			background-color: rgba(255, 255, 255, 1.000000);
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 750rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.box_1 {
			background-color: rgba(239, 239, 239, 1.000000);
			width: 750rpx;
			height: 104rpx;
			flex-direction: row;
			display: flex;
			margin-top: 300rpx;
			
			.calendar {
				margin: 0px 20rpx;
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}
			
			.total-1 {
				margin-bottom: 20rpx;
			}
		}

		.text_3 {
			width: 190rpx;
			height: 31rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 32rpx;
			margin: 37rpx 0 0 31rpx;
		}

		.icon_2 {
			width: 25rpx;
			height: 23rpx;
			margin: 41rpx 0 0 30rpx;
		}

		.icon_3 {
			width: 11rpx;
			height: 16rpx;
			margin: 44rpx 0 0 158rpx;
		}

		.text_4 {
			width: 206rpx;
			height: 34rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 36rpx;
			margin: 35rpx 0 0 24rpx;
		}

		.icon_4 {
			width: 11rpx;
			height: 16rpx;
			margin: 43rpx 40rpx 0 24rpx;
		}

		.text-wrapper_2 {
			width: 688rpx;
			height: 37rpx;
			flex-direction: row;
			display: flex;
			margin: 380rpx 0 0 28rpx;
		}

		.text_5 {
			width: 102rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin-top: 16rpx;
		}

		.text_6 {
			width: 119rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin: 16rpx 0 0 15rpx;
		}

		.text_7 {
			width: 119rpx;
			height: 50rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 53rpx;
			margin-left: 51rpx;
		}

		.text_8 {
			width: 102rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin: 16rpx 0 0 46rpx;
		}

		.text_9 {
			width: 119rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin: 16rpx 0 0 15rpx;
		}

		.image_3 {
			width: 670rpx;
			height: 1rpx;
			margin: 30rpx 0 0 40rpx;
		}

		.text-wrapper_3 {
			width: 602rpx;
			height: 27rpx;
			flex-direction: row;
			display: flex;
			margin: 30rpx 0 0 117rpx;
		}

		.text_10 {
			width: 53rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
		}

		.text_11 {
			width: 56rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-left: 164rpx;
		}

		.text_12 {
			width: 55rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-left: 104rpx;
		}

		.text_13 {
			width: 84rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-left: 86rpx;
		}

		.image_4 {
			width: 670rpx;
			height: 1rpx;
			margin: 29rpx 0 0 40rpx;
		}

		.box_2 {
			width: 668rpx;
			height: 72rpx;
			flex-direction: row;
			display: flex;
			margin: 28rpx 0 0 39rpx;
		}

		.text_14 {
			width: 13rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(26, 26, 26, 1);
			font-size: 28rpx;
			font-family: DIN-Bold;
			font-weight: 700;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-top: 29rpx;
		}

		.image_5 {
			width: 72rpx;
			height: 72rpx;
			margin-left: 36rpx;
			border-radius: 50%;
		}

		.text_15 {
			width: 50rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(26, 26, 26, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin: 24rpx 0 0 33rpx;
		}

		.text_16 {
			width: 61rpx;
			height: 22rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin: 27rpx 0 0 86rpx;
		}

		.text_17 {
			width: 65rpx;
			height: 22rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Bold;
			font-weight: 700;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin: 27rpx 0 0 97rpx;
		}

		.text_18 {
			width: 53rpx;
			height: 22rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Bold;
			font-weight: 700;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin: 27rpx 0 0 102rpx;
		}

		

		


		.box_8 {
			position: absolute;
			left: 38rpx;
			top: 00rpx;
			width: 682rpx;
			height: 383rpx;
			display: flex;
			flex-direction: row;
		}

		.text_44 {
			width: 91rpx;
			height: 36rpx;
			overflow-wrap: break-word;
			color: rgba(255, 146, 101, 1);
			font-size: 36rpx;
			font-family: SourceHanSansCN-Normal;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 151rpx;
			margin: 318rpx 0 0 321rpx;
		}

		.group_7 {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 682rpx;
			height: 383rpx;
			background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6261372b45253d574328766cb2e152171a223148.png') 100% no-repeat;
			background-size: 100% 100%;
			flex-direction: row;
			display: flex;
			justify-content: flex-center;
		}

		.image-text_1 {
			width: 129rpx;
			height: 219rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 156rpx 0 0 51rpx;
		}

		.single-avatar_1 {
			width: 129rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		.text-group_1 {
			width: 96rpx;
			height: 69rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 20rpx 0 0 7rpx;
		}

		.text_45 {
			width: 52rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 35rpx;
			margin-left: 28rpx;
		}

		.text_46 {
			width: 96rpx;
			height: 28rpx;
			overflow-wrap: break-word;
			color: rgba(255, 146, 101, 1);
			font-size: 36rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-top: 14rpx;
		}

		.box_9 {
			width: 129rpx;
			height: 251rpx;
			display: flex;
			flex-direction: column;
			margin: 110rpx 0 0 98rpx;
		}

		.image-text_2 {
			width: 129rpx;
			height: 177rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.single-avatar_2 {
			width: 129rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		.text-group_2 {
			width: 51rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 35rpx;
			margin: 21rpx 0 0 38rpx;
		}

		.text_47 {
			width: 96rpx;
			height: 28rpx;
			overflow-wrap: break-word;
			color: rgba(255, 146, 101, 1);
			font-size: 36rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin: 14rpx 0 0 7rpx;
		}

		.text_48 {
			width: 102rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin: 11rpx 0 0 12rpx;
		}

		.image-text_3 {
			width: 129rpx;
			height: 218rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 156rpx 52rpx 0 94rpx;
		}

		.single-avatar_3 {
			width: 129rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		.text-group_3 {
			width: 96rpx;
			height: 68rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 20rpx 0 0 8rpx;
		}

		.text_49 {
			width: 50rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 35rpx;
			margin-left: 29rpx;
		}

		.text_50 {
			width: 96rpx;
			height: 28rpx;
			overflow-wrap: break-word;
			color: rgba(255, 146, 101, 1);
			font-size: 36rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-top: 14rpx;
		}
	}
</style>